<template>
    <div class="index column">
        <img src="../assets/img/adimg.jpg"
            alt>
        <div class="row content">
            <p>正在热映</p>
            <span class="text">全部正在热映»</span>
            <a class="hover-text">即将上映»</a>
            <span>5/5</span>
            <i class="el-icon-d-arrow-left"
                @click="prev"></i>
            <i class="el-icon-d-arrow-right"
                @click="next"></i>
        </div>
        <div class="banner">
            <swiper ref="swiper"
                :class="swiperClass"
                :options="bannerSwiperOption">
                <swiper-slide v-for="(item, index) in 20"
                    :key="index">
                    <CardBox :info="cardInfo"></CardBox>
                </swiper-slide>
                <div class="swiper-pagination row-center"
                    slot="pagination"></div>
            </swiper>
        </div>
        <div class="center-advertising">
            <img src="../assets/img/gg.jpg"
                alt="">
        </div>
        <div class="tag-list row">
            <p>最近热门电影</p>
            <span class="tag"
                v-for="(item, index) in 5"
                :key="index">热门</span>
            <a class="hover-text">更多»</a>
        </div>
        <div class="movie row">
            <CardMovie v-for="(item, index) in 14"
                :key="index"
                :info="iteminfo"></CardMovie>
        </div>
        <div class="tag-list row">
            <p>最近热门电影</p>
            <span class="tag"
                v-for="(item, index) in 5"
                :key="index">热门</span>
            <a class="hover-text">更多»</a>
        </div>
        <div class="movie row">
            <CardMovie v-for="(item, index) in 14"
                :key="index"
                :info="iteminfo"></CardMovie>
        </div>
        <div class="tag-list row">
            <p>最近热门电影</p>
            <span class="tag"
                v-for="(item, index) in 5"
                :key="index">热门</span>
            <a class="hover-text">更多»</a>
        </div>
        <div class="movie row">
            <CardMovie v-for="(item, index) in 14"
                :key="index"
                :info="iteminfo"></CardMovie>
        </div>
        <div class="tag-list row">
            <p>最近热门电影</p>
            <span class="tag"
                v-for="(item, index) in 5"
                :key="index">热门</span>
            <a class="hover-text">更多»</a>
        </div>
        <div class="column"
            v-for="(item, index) in 14"
            :key="index">
            <CommentCardBox :info="commentInfo"></CommentCardBox>
        </div>
        <div class="bottom">
            <img src="../assets/img/bottom-img1.jpg"
                alt="">
        </div>
    </div>
</template>
<script>
import CardBox from "@/components/CardBox"
import CardMovie from "@/components/CardMovie"
import CommentCardBox from "@/components/CommentCardBox"
import {mapActions} from "vuex"
import { swiper, swiperSlide } from "vue-awesome-swiper"
export default {
    name: "index",
    components: {
        swiper,
        swiperSlide,
        CardBox,
        CardMovie,
        CommentCardBox
    },
    data() {
        return {
            bannerSwiperOption: {
                slidesPerView: 6,
                spaceBetween: 10,
                slidesPerGroup: 6,
                loop: false,
                autoHeight: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    bulletClass: "swiper-bullet",
                    bulletActiveClass: "swiper-active-bullet"
                }
            },
            commentInfo: {
                movieName: "蜘蛛侠:平行宇宙",
                imgUrl: require("../assets/img/card.jpg"),
                imgNumber: 3.5,
                comment:
                    "很多人说用mv的方式拍摄不好，观影体验差，那你们有没有想过，这些小朋友们在拍摄的时候，心里该会有多么的开心，换个角度想想吧 - 霍灵轩的短评",
                auth: "霍灵轩",
                title: "深藏于心的那份青涩"
            },
            iteminfo: {
                imgUrl: require("../assets/img/card.jpg"),
                imgName: "蜘蛛侠:平行宇宙",
                imgNumber: 3.5,
                time: 2018,
                PeopleNumber: 4445155,
                minute: 180,
                address: "中国大陆",
                director: "赵建杰/老赵",
                performer: "哈哈/呵呵/嘻嘻/么么哒",
                comment:
                    "很多人说用mv的方式拍摄不好，观影体验差，那你们有没有想过，这些小朋友们在拍摄的时候，心里该会有多么的开心，换个角度想想吧 - 霍灵轩的短评",
                state: "可播放"
            },
            cardInfo: {
                imgUrl: require("../assets/img/card.jpg"),
                movieName: "蜘蛛侠:平行宇宙",
                movieNumber: 3.5,
                time: 2018,
                peopleNumber: 4445155,
                minute: 180,
                address: "中国大陆",
                director: "杨晨/老赵",
                performer: "哈哈/呵呵/嘻嘻/么么哒"
            }
        }
    },
    created() {
        this.init()
    },
    computed: {
        swiperClass: () =>
            `swiper-${new Date().getTime()}-${Math.floor(
                Math.random() * 100 + 1
            )}`,
        swiper() {
            return this.$refs.swiper.swiper
        }
    },
    methods: {
        ...mapActions(["test"]),
        /**
         * 初始化方法
         */
        init() {
            this.toTest()
        },
        /**
         * 测试方法
         */
        async toTest() {
            await this.test()
        },
        next() {
            this.swiper.slidePrev()
        },
        prev() {
            this.swiper.slideNext()
        }
    }
}
</script>

<style lang="less" scoped>
    .index {
        width: 64vw;
        min-width: 500px;
        img {
            height: 100px;
            width: 96%;
            min-width: 700px;
            margin-top: 30px;
            margin-bottom: 15px;
        }
        .content {
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 18px;
            padding-bottom: 10px;
        }
        .banner {
            width: 65%;
            min-width: 860px;
            margin-left: -20px;
        }
        .text {
            font-size: 13px;
            color: #666699;
            margin-left: 10px;
        }
        .hover-text {
            &:hover {
                color: #fff;
                background-color: #27a;
            }
        }
        .center-advertising {
            height: 112px;
            width: 65%;
            min-width: 875px;
            margin-left: -5px;
            margin-bottom: 20px;
        }
        .tag-list {
            position: relative;
            // background: #666699;
            width: 65%;
            min-width: 840px;
            height: 50px;
            margin-left: -8px;
            border-bottom: 1px solid #eaeaea;
            .tag {
                display: inline-block;
                zoom: 1;
                cursor: pointer;
                padding: 1px 10px;
                margin: 0 3px 0px 0;
                color: #666;
                font-size: 14px;
                border-radius: 2px;
                &:hover {
                    background: #4b8ccb;
                    color: #fff;
                }
                .selected-tag {
                    color: #000;
                    &:hover {
                        color: #000;
                    }
                }
            }
            .hover-text {
                position: absolute;
                right: 0px;
            }
        }
        .movie {
            margin-left: -25px;
            // justify-content: space-between;
            // background: red;
            // min-height: 400px;
            width: 65%;
            min-width: 900px;
            flex-wrap: wrap;
        }
        .bottom {
            width: 100%;
            height: 110px;
            margin-bottom: 30px;
        }
    }
</style>
<style lang="less">
    .index {
        .banner {
            // .swiper-slide{
            //   margin-left:0px !important;
            //   margin-right: -50px !important;
            // }
        }
    }
</style>
